<style scoped>
  .layout-con {
    height: 100%;
    width: 100%;
  }

  .menu-item span {
    display: inline-block;
    overflow: hidden;
    width: 69px;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    transition: width .2s ease .2s;
  }

  .menu-item i {
    transform: translateX(0px);
    transition: font-size .2s ease, transform .2s ease;
    vertical-align: middle;
    font-size: 16px;
  }

  .collapsed-menu span {
    width: 0px;
    transition: width .2s ease;
  }

  .collapsed-menu i {
    transform: translateX(5px);
    transition: font-size .2s ease .2s, transform .2s ease .2s;
    vertical-align: middle;
    font-size: 22px;
  }

  .title-top-center {
    text-align: center;

  }

  .title-top-right {
    float: right
  }

  .btn_tools {
    padding: 6px 10px 6px 10px;
    background: #eee;
    border-radius: 20px;
  }

  .ivu-cell-extra {
    color: #ed4014;
  }
</style>
<template>
  <Row type="flex" justify="center" align="top" class="code-row-bg">
    <Col span="1" style="background:#3F88D5;height:100vh;">

      <div class="icons-item" style="height:72px;color:#ffffff;text-align:center;padding:20px 0 100px 0;">
        <Avatar icon="ios-person"/>
      </div>

      <ul style="padding: 0!important;list-style: none!important;">
        <a :href="'/'" class="icons-item"
           style="background:#41A0ED;height:64px;color:#ffffff;text-align:center;padding:10px 0 10px 0;display: block;outline: 0;list-style: none;font-size: 12px;">
          <Icon type="ios-desktop" size="24" style="color:#ffffff;"/>
          <p>管理端</p>
        </a>


        <a class="icons-item"
           style="height:64px;color:#ffffff;text-align:center;padding:10px 0 10px 0;display: block;outline: 0;list-style: none;font-size: 12px;">
          <Icon type="ios-people" size="24" style="color:#ffffff;"/>
          <p>员工端</p>
        </a>

        <a class="icons-item"
           style="height:64px;color:#ffffff;text-align:center;padding:10px 0 10px 0;display: block;outline: 0;list-style: none;font-size: 12px;">
          <Icon type="ios-help-circle" size="24" style="color:#ffffff;"/>
          <p>问题管理</p>
        </a>
      </ul>

    </Col>
    <Col span="4">
      <CellGroup>
        <Cell title="全部单元" to="/"/>
        </Cell>
        <div v-for="item in itemList">
          <Cell v-if="item.unit_id===unit_id" :title="item.city" :label="item.department_name" :extra="item.score"
                :to="{path:'/item/detail',query:{id:item.unit_id}}" selected>
            <Badge :count="item.question_num" slot="extra"/>
          </Cell>
          <Cell v-else :title="item.city" :label="item.department_name" :extra="item.score"
                :to="{path:'/item/detail',query:{id:item.unit_id}}">
            <Badge :count="item.question_num" slot="extra"/>
          </Cell>
        </div>
      </CellGroup>
    </Col>
    <Col span="19" style="background:#f5f7f9;height:100vh;">
      <Layout>
        <Content :style="{padding: '0 16px 16px'}">
          <Breadcrumb :style="{margin: '16px 0'}">
            <Row type="flex" justify="space-between">
              <Col span="6">
                <a type="text" size="large" @click="$router.back(-1)">
                  <Icon type="ios-arrow-back"></Icon>
                  返回
                </a>
              </Col>
              <Col span="12" class="title-top-center"
                   style="font-size: 16px; font-weight: bold; color: rgb(70, 76, 91);text-align:center;">成本设定
              </Col>
              <Col span="6">

              </Col>
            </Row>
          </Breadcrumb>
        </Content>
        <div class="content">
          <div class="con_target">
            <span class="ct_title">成本达成率　目标值</span>
            <div class="ct_con">
              <div class="ctc_input"><InputNumber :max="10000" :min="0" v-model="minTarget"></InputNumber></div>
              <span class="ctc_span">至</span>
              <div class="ctc_input"><InputNumber :max="10000" :min="0" v-model="maxTarget"></InputNumber></div>
              <span class="ctc_span">元/件</span>
            </div>
          </div>
          <div class="con_rules_title">设定记分规则</div>
          <div class="con_rules">
            <div class="con_rule">
              <span class="cr_left colorLevel_1">5分</span>
              <div class="cr_right">
                <span class="crr_font">大于等于</span>
                <InputNumber :max="100" :min="0" v-model="values[0]"
                   :formatter="value => `${value}%`"
                   :parser="value => value.replace('%', '')"></InputNumber>
                <span class="crr_font">以上</span>
              </div>
            </div>
            <div class="con_rule">
              <span class="cr_left colorLevel_2">4分</span>
              <div class="cr_right">
                <span class="crr_font">大于等于</span>
                <InputNumber :max="100" :min="0" v-model="values[1]"
                             :formatter="value => `${value}%`"
                             :parser="value => value.replace('%', '')"></InputNumber>
                <span class="crr_font">小于{{values[0]}}%</span>
              </div>
            </div>
            <div class="con_rule">
              <span class="cr_left colorLevel_2">3分</span>
              <div class="cr_right">
                <span class="crr_font">大于等于</span>
                <InputNumber :max="100" :min="0" v-model="values[2]"
                             :formatter="value => `${value}%`"
                             :parser="value => value.replace('%', '')"></InputNumber>
                <span class="crr_font">小于{{values[1]}}%</span>
              </div>
            </div>
            <div class="con_rule">
              <span class="cr_left colorLevel_3">2分</span>
              <div class="cr_right">
                <span class="crr_font">大于等于</span>
                <InputNumber :max="100" :min="0" v-model="values[3]"
                             :formatter="value => `${value}%`"
                             :parser="value => value.replace('%', '')"></InputNumber>
                <span class="crr_font">小于{{values[2]}}%</span>
              </div>
            </div>
            <div class="con_rule">
              <span class="cr_left colorLevel_3">1分</span>
              <div class="cr_right">
                <span class="crr_font">大于等于</span>
                <InputNumber :max="100" :min="0" v-model="values[4]"
                             :formatter="value => `${value}%`"
                             :parser="value => value.replace('%', '')"></InputNumber>
                <span class="crr_font">小于{{values[3]}}%</span>
              </div>
            </div>
            <div class="con_rule">
              <span class="cr_left colorLevel_3">0分</span>
              <div class="cr_right" style="justify-content: flex-end">
                <span class="crr_font">小于{{values[4]}}%</span>
              </div>
            </div>
          </div>
        </div>
      </Layout>
    </Col>
  </Row>
</template>
<script>
  import cookie from 'js-cookie';

  export default {
    data() {
      return {
        isCollapsed: false,
        itemList: [],
        itemInfo: [],
        tjList: [],
        unit_id: "",
        minTarget: 665,
        maxTarget: 0,
        values: [90,80,70,60,50,0]
      };
    },
    methods: {
      getData() {
        var uid = cookie.get('uid');
        var token = cookie.get('token');
        var unit_id = localStorage.getItem('middleId')
        if (!unit_id) {
          this.$Message.warning('无参数不能访问');
          return;
          //store.dispatch('setLoginStatus', 0)
          //window.location.reload()
        }
        this.$Loading.start();
        var str = {unit_id: unit_id, loginType: cookie.get('loginType')};
        var strdata = this.$twjsdes.enstr(str);
        this.$http.post(this.$API_URL + '/item/detail', {alldata: strdata.alldata}).then((response) => {
          this.$Loading.finish();
          var res = this.$twjsdes.decrypt(response.data.alldata);
          if (res.status == -1 && res.data.backurl) {
            this.$Modal.warning({
              title: '提示',
              content: '请在企业微信授权登录后使用',
              onOk: () => {
                window.location.href = res.data.backurl
              }
            });

          } else if (res.status != 1) {
            this.$Message.error(res.msg);
          } else {
            console.log(res.data);
            this.itemList = res.data.item_all_list;
            this.itemInfo = res.data;
            this.tjList = res.data.list;
            localStorage.setItem('middleId',res.data.unit_id)
          }
        }).catch(function (error) {
          this.$Modal.error({
            title: '提示',
            content: '网络连接错误，请检查后重试'
          });
          //console.log(error);
        });
      },
    },
    computed: {
      menuitemClasses: function () {
        return [
          'menu-item',
          this.isCollapsed ? 'collapsed-menu' : ''
        ]
      }
    },
    created() {
      window.document.title = 'SCS设置';
      this.getData();
    },
    mounted() {
    }
  }
</script>
<style lang="less">
  .content{
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0 16px;
    box-sizing: border-box;
    .con_target{
      display: flex;
      flex-direction: column;
      padding: 18px 16px;
      background: #fff;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      border: 1px solid #e5e5e5;
      .ct_title{
        font-size: 15px;
        color: #222222;
        margin-bottom: 15px;
      }
      .ct_con{
        display: flex;
        flex-direction: row;
        .ctc_input{
          width: 150px;
          height: 40px;
          .ivu-input-number{
            width: 100%;
            height: 100%;
            line-height: 40px;
            font-size: 16px;
            color: #222222;
            .ivu-input-number-handler{
              height: 20px;
              .ivu-input-number-handler-down-inner, .ivu-input-number-handler-up-inner{
                line-height: 20px;
              }
            }
          }
        }
        .ctc_span{
          font-size: 16px;
          color: #222222;
          line-height: 40px;
          margin-left: 10px;
          margin-right: 10px;
        }
      }
    }
    .con_rules_title{
      width: 100%;
      height: 50px;
      line-height: 50px;
      border: 1px solid #e5e5e5;
      border-top: none;
      font-size: 15px;
      color: #222222;
      padding-left: 16px;
      background: #f9f9f9;
    }
    .con_rules{
      display: flex;
      flex-direction: column;
      .con_rule{
        width: 100%;
        height: 50px;
        line-height: 50px;
        padding: 0 16px;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        background: #fff;
        border: 1px solid #e5e5e5;
        border-top: none;
        .cr_left{
          font-size: 16px;
        }
        .colorLevel_1{
          color: #56b44a;
        }
        .colorLevel_2{
          color: #ffb11b;
        }
        .colorLevel_3{
          color: #f15c60;
        }
        .cr_right{
          width: 220px;
          display: flex;
          flex-direction: row;
          .crr_font{
            font-size: 15px;
            color: #666666;
          }
          .ivu-input-number{
            margin: auto 10px;
            font-size: 16px;
            color: #222222;
          }
        }
      }
    }
  }
</style>

